<template>
  <div class="bigboxq">
    <div>
      <van-nav-bar
  title="修改密码"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>
    </div>
    <div class="colors">
    <div style="padding-top: 20px">
      <!-- 输入密码 -->
    <van-field v-model="Password" type="password" label="原密码" placeholder="请输入原密码" />
    <van-field v-model="NewPassword" type="password" label="新密码" placeholder="请输入6到18位密码"/>
    <van-field v-model="EnterPassword" type="password" label="确认密码" placeholder="请再次输入密码" />
    </div>
    <div class="bigbox">
      
  
    <div class="nav">
      <p  >6-18位，必须同时包含数字、小写和大写字母</p>
    </div>
      </div>
    <div>
      <van-field
  v-model="sms"
  center
  clearable
  label="动态码"
  placeholder="请输入动态码"
>
  <template #button>
    <div @click="resetCode()">
      <registerCode  :identifyCode="code" :contentWidth="100" :contentHeight="40"></registerCode>
    </div>
  </template>
</van-field>
    </div>
    <div class="BtnEventName">
      <van-button type="info" style="width:345px;" @click="save">确定</van-button>
    </div>
 </div>
  </div>
</template>
<script>
import registerCode from "@/components/code"
export default {

  components:{
    registerCode
  },
  data() {
    return {
      Password: '',
      NewPassword:'',
      EnterPassword:'',
      password:'',
      sms:'',
      code:'',
    };
  },
    mounted(){
this.resetCode();
  },
  methods: {
    //路由跳转
    onClickLeft() {
      this.$router.push({path:'set'})
    },
    //验证吗
    resetCode(){
      this.code="";
      const codeList="zxcvbnmasdfghjklqwertyuiop1234567890";
      for(let i= 0; i<4;i++){
        let random =  Math.floor((Math.random() * codeList.length) + 0);
        this.code+=codeList[random]
      }
    },
    save(){
      this.$router.push({path:'set'})
    }
  },
};
</script>

<style scoped>
.nav{
  width: 345px;
	height: 18px;
  margin-left: 15px;
	top: 223px;
	color: rgba(80, 80, 80, 1);
	font-size: 10px;
	line-height: 150%;
	text-align: left;
  /* width: 92%;
  background-color: #f7f7f7; */
}
.BtnEventName{
	height: 44px;
  margin-top: 250px;
	color: rgba(255, 255, 255, 1);
	border-radius: 4px;
	font-size: 16px;
	line-height: 150%;
	text-align: center;
}
.bigbox{
    height: 100%;
    background: #efefef
}
.colors{
  background-color: #efefef;
}
.bigboxq{
  height: 100%;
  background-color: #efefef;
}
</style>